<template>
	<view class="juzhong">
		<view class="">
			<view class="tubiao">
				<image class="logo" src="../../static/支付.png"></image>
			</view>
			<!-- <view class="tubiao">
				古额大家一件的股和快乐等同于
			</view> -->
			<view class="tubiao totalprice">
				{{form.payPrice}}.00
			</view>
			<view class="tubiao">
				待支付
			</view>
		</view>
		<!-- 总价格 -->
		<view class="media-foot">
			<view class="">
				原价格：
			</view>
			<view class="">
				{{form.totalPrice}}.00元
			</view>
		</view>
		<!-- 订单编号 -->
		<view class="media-foot">
			<view class="newTime">
				订单编号：
			</view>
			<view class="newTime">
				{{form.orderNo}}
			</view>
		</view>
		<!-- 订单状态 -->
		<view class="media-foot">
			<view class="">
				订单状态：
			</view>
			<view class="">
				待支付
			</view>
		</view>
		<!-- 创建时间 -->
		<view class="media-foot">
			<view class="newTime">
				订单创建时间:
			</view>
			<view class="newTime">
				{{form.createTime.split('T')[0]}}
			</view>
		</view>
		<!-- 订单时长 -->
		<view class="media-foot">
			<view class="">
				订单时长:
			</view>
			<view class="">
				{{form.orderTime==1?'60分钟':form.orderTime==2?'120分钟':form.orderTime==3?'180分钟':'240分钟'}}
			</view>
		</view>
		<!-- 支付方式 -->
		<!-- <view class="way">
			<view class="payway">
				请选择支付方式:
			</view>
				<view class="uni-form-item uni-column">
					<radio-group class="uni-list" @change="radioChange">
						
						<label class="media-foot uni-list-cell uni-list-cell-pd choose">
							<view class="media-foot">  
								<view>
									<image src="../../static/支付宝.png"></image>
								</view>
								<label class="label-2-text">
									<text class="ziti">支付宝</text>
								</label>
							</view>
							<view>
								<radio id="1" value="支付宝" checked></radio>
							</view>
						</label>
						<label class="media-foot uni-list-cell uni-list-cell-pd choose">
							<view>
								<label class="label-2-text media-foot">
									<view class="">
										<image src="../../static/微信支付.png"></image>
									</view>
									<text class="ziti">微信</text>
								</label>
							</view>
							<view>
								<radio id="2" value="微信"></radio>
							</view>
						</label>
						
					</radio-group>
				</view>
		</view> -->
		<view class="success">
			下单成功！！
		</view>
		<view class="success">
			扫描二维码支付后等待管理员安排
		</view>
		<image class="payMoney" src="../../static/微信二维码.jpg"></image>
		
		<u-button @click="confirm" text="返回首页>"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					createTime:''
				},
				id:null,
				radioItems: [{
						name: 'USA',
						value: '美国'
					},
					{
						name: 'CHN',
						value: '中国',
						checked: 'true'
					}
				],
				payway:'支付宝'
			}
		},
		onLoad(event){
			this.id=event.id
			console.log(this.id)
			this.orderDetail()
		},
		methods: {
			// 过滤订单号
			
			//根据id查询订单
			async orderDetail(){
				const res = await this.$api.orderDetail({
					id:this.id
				})
				res.data.orderNo=res.data.orderNo.split('-')[4]
				this.form=res.data
				console.log(this.form)
				
			},
			radioChange: function(e) {
				// console.log(e.detail)
				this.payway=e.detail.value
				console.log(this.payway)
			},
			confirm(){
				uni.switchTab({
					url: '/pages/news/index',
					 success(){
					        let page = getCurrentPages().pop(); //跳转页面成功之后
					        if (!page) return; 
					            page.onLoad(); //如果页面存在，则重新刷新页面
					        }
					 // success(){
					 //        let page = getCurrentPages().pop(); //跳转页面成功之后
					 //        if (!page) return; 
					 //            page.onLoad(); //如果页面存在，则重新刷新页面
					 //        }
				})
			}
		}
	}
</script>

<style>
	.media-foot {
		display: flex;
		margin: 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

	}

	.tubiao {
		text-align: center;
	}

	.totalprice {
		font-size: 50rpx;
		margin: 5rpx 0;
	}

	.logo {
		width: 50rpx;
		height: 50rpx;
		margin-top: 35rpx;
	}
	.way{
		margin: 10rpx;
		padding: 16rpx 20rpx;
		border: 2px solid #ebebeb;
		border-radius: 15rpx;
	}
	.payway{
		font-size: 35rpx;
	}
	.choose{
		margin: -10rpx 22rpx;
		height: 170rpx;
	}
	.u-button{
		/* background-color: rgb(118,237,214); */
		/* color: white; */
		color: blue;
		font-size: 40rpx;
		border: 0;
		width: 80%;
		/* border-radius: 10rpx; */
		margin-top: 10rpx;
	}
	.ziti{
		margin-left: 15rpx;
	}
	.success{
		/* width: 77%; */
		margin: 0 auto;
		margin: 5rpx 0;
		color:rgb(118, 237, 214) ;
		font-size: 35rpx;
	}
	.newTime{
		white-space: nowrap;
	}
	.juzhong{
		text-align: center;
	}
	.payMoney{
		width: 400rpx;
		height: 400rpx;
	}
</style>
